// 定义几种颜色
@navBgColor: #f9f9f9;
@color: #5d4484;

// 定义工具方法
.hlh(@h) {
	height: @h;
	line-height: @h;
}
// .wcenter(120px) => width: 120px; margin: 0 auto 0;
.wcenter(@w, @mt: 0, @mb: 0) {
	width: @w;
	margin: @mt auto @mb;
}
.cricleBorder(@bs, @b) {
	border-radius: @bs;
	border: @b;
}
// 定义默认字体
body {
	font-family: e('-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif');
}

// 修改导航样式
.header {
	margin-bottom: 0;
	a {
		color: @color;
		cursor: pointer;
	}
	ul li a:hover,
	ul li a.choose {
		background: @navBgColor;
	}
}
// 首页
.home {
	.banner {
		padding: 60px 0 80px;
		background: @color;
		color: #fff;
		text-align: center;
		.logo {
			.wcenter(150px);
			.hlh(150px);
			.cricleBorder(20px, 1px solid #fff);
			font-size: 100px;
		}
		h1 {
			.wcenter(800px, 30px);
			font-size: 30px;
			line-height: 50px;
		}
		.btn {
			.cricleBorder(6px, 1px solid #fff);
			padding: 12px 32px;
			font-size: 24px;
			margin-top: 30px;
			&:hover {
				background: #fff;
				color: @color;
			}
		}
		p {
			margin-top: 20px;
			color: lighten(@color, 30%)
		}
	}
	.first-list {
		padding-top: 100px;
		text-align: center;
		color: #666;
		font-size: 22px;
		border-bottom: 1px solid #ccc;
		h1 {
			font-size: 40px;
			color: #000;
		}
		.line {
			.wcenter(100px, 50px, 50px);
			border-bottom: 1px solid #ccc;
		}
		p {
			.wcenter(900px);
		}
		ul {
			li {
				list-style: none;
				padding: 0;
				width: 33.33333333%;
				float: left;
			}
			img {
				width: 90%;
			}
			h3 {
				font-size: 26px;
				color: #000;
			}
			p {
				.wcenter(90%);
				font-size: 14px;
			}
		}
		.btn {
			color: @color;
			border: 1px solid @color;
			margin: 50px auto 120px;
			&:hover {
				color: #fff;
				background: @color;
			}
		}
	}
	// 第二个列表的样式复用第一个
	.second-list {
		.first-list;
		// 重写一些样式
		ul {
			li {
				width: 25%;
				border-right: 1px solid transparent;
				box-sizing: border-box;
			}
			img {
				width: 100%;
			}
			li:last-child {
				border-right: none;
			}
		}
	}
}
// 定义内容页样式
.page {
	.banner {
		background: @color;
		padding: 60px 0;
		text-align: left;
		h1 {
			color: #fff;
			font-size: 60px;
		}
		p {
			font-size: 24px;
			width: 760px;
			color: lighten(@color, 30%);
		}
		margin-bottom: 40px;
	}	
	li {
		list-style: none;
	}
	.article {
		width: 800px;
		float: left;
		h3 {
			font-size: 40px;
			line-height: 80px;
			border-bottom: 1px solid #ccc;
			margin-bottom: 30px;
		}	
		p {
			font-size: 22px;
			line-height: 36px;
			margin-bottom: 60px;
		}
	}
	.aside {
		margin-left: 850px;
		padding-top: 40px;
		li {
			font-size: 14px;
			line-height: 30px;
			border-left: 1px solid transparent;
			padding-left: 20px;
			&:hover {
				border-left: 1px solid @color;
				color: @color;
			}
			a {
				color: #666;
				&:hover {
					text-decoration: none;
				}
			}
		}
	}
}